<template>
	<div class="movie_region">
		<div class="movie_region_title">
			<h2>{{ tagTitle }} 电影推荐</h2>
			<div class="movie_region_title_right">
				<div class="right_text" @click="goMovieTag()">
					获取更多<icon-caret-right />
				</div>
			</div>
		</div>
		<div class="movie_region_menus">
			<!-- 骨架屏 -->
			<a-skeleton
				animation="true"
				class="movie_region_item"
				v-for="item in movieItem"
				:key="item"
				@click="goDetails(item._id)"
			>
				<!-- 骨架 -->
				<div class="movie_region_item_left" v-if="delayLoding">
					<a-skeleton-shape style="width: 150px; height: 200px" />
				</div>
				<!-- 真实内容 -->
				<div class="movie_region_item_left" v-else>
					<!-- 图片懒加载 -->
					<img v-layz src="" :data-src="item.movieImg" />
				</div>
				<!-- 骨架 -->
				<div class="movie_region_item_right" v-if="delayLoding">
					<a-skeleton-shape style="width: 100%; height: 1rem" />
					<a-skeleton-line :rows="5" />
				</div>
				<!-- 真实内容 -->
				<div class="movie_region_item_right" v-else>
					<h2>{{ item.movieName }}</h2>
					<a-space>
						<a-tag
							v-for="x in item.movieCategory"
							size="small"
							:key="x"
							>{{ x }}</a-tag
						>
					</a-space>
					<p>上映地区 : {{ item.movieArea }}</p>
					<p class="text_hidden">
						{{ item.movieContext }}
					</p>
				</div>
			</a-skeleton>
		</div>
	</div>
</template>

<script setup>
import { useRouter } from 'vue-router'
const router = useRouter()
const props = defineProps({
	tagTitle: String,
	movieItem: Array,
	loading: Boolean
})
const delayLoding = ref(true)
// 各类型的电影数据
const { tagTitle = '', movieItem, loading } = toRefs(props)
// 手动设置延迟 避免骨架屏还没显示出来数据就返回了
if (loading.value) {
	setTimeout(() => {
		delayLoding.value = false
	}, 500)
}
function goDetails(id) {
	router.push(`/movieDetails/${id}`)
}
function goMovieTag() {
	router.push(`/movie?tag=${tagTitle.value}`)
}
</script>

<style lang="scss" scoped>
.movie_region {
	width: 100%;
	display: flex;
	flex-direction: column;
	gap: var(--normal-distance);
	margin-top: var(--normal-distance);
	background-color: var(--main-2-bg);
	overflow: hidden;
	.movie_region_title {
		display: flex;
		flex: 1;
		min-height: 0;
		justify-content: space-between;
		align-items: center;
		padding-left: var(--normal-distance);
		color: var(--fc-bg);
		background-color: var(--ti-bg);
		border-left: var(--normal-sm-distance) solid var(--br-bg);
		& > * + * {
			margin-right: 2rem;
		}
		.movie_region_title_right {
			cursor: pointer;
			.right_text:hover {
				color: brown;
			}
		}
	}
	.movie_region_menus {
		flex: 1;
		display: flex;
		flex-wrap: wrap;
		gap: var(--normal-distance);
		padding: var(--normal-distance);
		.movie_region_item {
			min-width: 300px;
			max-width: 300px;
			display: flex;
			gap: var(--normal-distance);
			padding: var(--normal-distance);
			margin-right: auto;
			cursor: pointer;
			border-radius: 5px;
			&:hover {
				box-shadow: 0 0 6px var(--sd-bg);
			}
			.movie_region_item_left {
				flex: 1;
				img {
					width: 150px;
					height: 100%;
				}
			}
			.movie_region_item_right {
				flex: 1;
				min-width: 150px;
				font-size: 0.8rem;
				overflow: hidden;
				color: var(--fc-bg);
				& > h2 {
					color: var(--fc-bg);
				}
			}
		}
	}
}
:deep(.arco-tag.arco-tag-size-small.arco-tag-checked) {
	background-color: var(--main-bg);
	color: var(--fc-bg);
}
</style>
